<template>
    <div class="app-container">


        <searchForm :formOptions="formOptions" @onSearch="onSearch" @onReset="onReset" v-show="showSearch" />
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['wsp:deptpost:add']">新增</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table :data="tablelist">
            <!-- <el-table-column label="学号" prop="houseName" :show-overflow-tooltip="true" align="center" /> -->
            <el-table-column label="部门" prop="deptName" align="center" :show-overflow-tooltip="true" />
            <el-table-column label="岗位名称" prop="postName" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="岗位描述" prop="postDesc" align="center" :show-overflow-tooltip="true" width="200" />
            <el-table-column label="用工时长" prop="workHours" align="center" width="120">
                <template slot-scope="scope">
                    {{ scope.row.workHours }}小时
                </template>
            </el-table-column>
            <el-table-column label="岗位薪酬" prop="postComp" align="center" width="120">
                <template slot-scope="scope">
                    {{ scope.row.postComp }}元/小时
                </template>
            </el-table-column>
            <el-table-column label="岗位需求人数" prop="postReqCount" align="center" width="120">
                <template slot-scope="scope">
                    {{ scope.row.postReqCount }}人
                </template>
            </el-table-column>
            <el-table-column label="用工状态" prop="applyStatus" align="center" width="120">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.wsp_yonggong_status" :value="scope.row.applyStatus"></dict-tag>
                </template>
            </el-table-column>
            <el-table-column label="申请人数" align="center">
                <el-table-column label="申请人数" prop="wspDeptPostStuApply.applyCount" align="center" width="80">
                    <template slot-scope="scope">
                        {{ scope.row.wspDeptPostStuApply.applyCount }}人
                    </template>
                </el-table-column>
                <el-table-column label="审核通过人数" prop="wspDeptPostStuApply.apprPassCount" align="center" width="100">
                    <template slot-scope="scope">
                        {{ scope.row.wspDeptPostStuApply.apprPassCount }}人
                    </template>
                </el-table-column>
            </el-table-column>
            <!-- <el-table-column label="申请时间" prop="applyTime" align="center" width="150" /> -->
            <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="230">
                <template slot-scope="scope" v-if="scope.row.applyStatus == 'JS' ? false : true">
                    <!-- <el-button size="mini" type="text" @click="handleExamine(scope.row)"
                        v-if="scope.row.applyStatus == 'D' ? true : false" v-hasPermi="['wsp:deptpost:appr']">审核</el-button> -->
                    <el-button size="mini" type="text" @click="handleDetail(scope.row)"
                        v-hasPermi="['wsp:deptpost:query']">详情</el-button>
                    <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
                        v-if="scope.row.applyStatus == 'Y' ? false : true" v-hasPermi="['wsp:deptpost:edit']">修改</el-button>
                    <el-button size="mini" type="text" @click="handleDelete([scope.row.wdpId])"
                        v-hasPermi="['wsp:deptpost:remove']">删除</el-button>
                    <el-button size="mini" type="text" @click="handleEnd(scope.row)"
                        v-hasPermi="['wsp:deptpost:eoe']">用工结束</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <!-- 添加或修改角色配置对话框 -->
        <Add ref="addRef" :treeData="deptOptions" @updateList="getList"></Add>
        <!-- 这个是列表修改的弹窗 -->
        <!-- 审核对话框 -->
        <el-dialog title="审核" :visible.sync="examine" @close="cancel" width="30%" append-to-body destroy-on-close>
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="审核结果:" prop="apprType">
                            <el-radio-group v-model="form.apprType">
                                <el-radio label="Y">通过</el-radio>
                                <el-radio label="N">不通过</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="不通过原因:" prop="applyCause" v-if="form.apprType == 'Y' ? false : true">
                            <el-input v-model.trim="form.applyCause" placeholder="请输入审核失败原因"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


    </div>
</template>
<script>
import searchForm from "@/components/Search/searchForm.vue";
import { deptTreeSelect } from "@/api/system/user";
import { getDicts } from "@/api/system/dict/type";
import Add from "@/views/worStudy/department/components/addDlg.vue"
import { deptpostList, delDeptpost, apprDeptpost, deptpostEoe } from '@/api/worStudy/department'

//   import StudentList from "./moudles/studentList"
export default {
    components: {
        searchForm,
        Add

    },
    dicts: ['wsp_yonggong_status'],
    data() {
        return {
            deptOptions: [],
            organList: [],
            formOptions: [
                {
                    label: "部门",
                    prop: "deptId",
                    element: "el-cascader",
                    placeholder: "请选择部门",
                    options: [],
                },
                {
                    label: "用工状态",
                    prop: "applyStatus",
                    element: "el-select",
                    placeholder: "请选择用工状态",
                    options: [],
                }
            ],
            showSearch: true,
            tablelist: [],
            selectData: [],
            total: 0,
            examine: false, // 审核弹窗
            form: {
                apprType: 'Y',
                applyCause: ''
            },
            queryParams: {
                pageNum: 0,
                pageSize: 10,
                name: ''
            },
            rules: {
                apprType: [
                    { required: true, message: "请选择审核结果", trigger: "change" }
                ],
                applyCause: [
                    { required: true, message: "请输入不通过原因", trigger: "blur" }
                ],
            }
        };
    },
    watch: {

    },
    created() {

        this.getList()
        this.department()

        getDicts("wsp_yonggong_status").then(res => {
            this.formOptions[1].options = res.data.map(item => {
                return {
                    value: item["dictValue"],
                    label: item["dictLabel"]
                };
            });
        });

    },
    methods: {
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "/league/org/user/export",
                {
                    ...this.queryParams
                },
                `组织成员_${new Date().getTime()}.xlsx`
            );
        },
        handleAdd(rowdata) {

            this.$refs.addRef.open(rowdata, 'add')
        },
        // 获取部门信息
        async department() {
            await deptTreeSelect().then(res => {
                this.deptOptions = res.data;
                this.formOptions[0].options = this.deptOptions
            });
        },

        handleUpdate(rowdata) {
            console.log(rowdata, 'rowdatarowdata1111')
            this.$refs.addRef.open(rowdata, 'edit')
        },
        // 审核操作
        handleExamine(row) {
            this.form.wdpId = row.wdpId
            this.form.apprType = ''
            this.form.applyCause = ''
            this.examine = true
        },

        plHandleDelete() {
            if (this.selectData.length > 0) {
                this.handleDelete(this.selectData.map((item) => { return item.wdpId }))
            } else {
                this.$modal.msgWarning("请选择人员");
            }
        },
        // 审核提交按钮
        submitForm() {
            this.$refs["form"].validate(valid => {
                apprDeptpost(this.form).then(response => {
                    if (response.code == 200) {
                        this.$modal.msgSuccess("审核成功");
                        this.examine = false;
                        this.getList()
                    }


                });

            });
        },
        // 查看详情
        handleDetail(row) {
            this.$router.push({ path: '/worStudy/department/employmentDetails', query: { wdpId: row.wdpId } })

        },
        // 取消按钮
        cancel() {
            this.examine = false;
            this.form = {}
        },
        handleDelete(ids) {
            this.$modal
                .confirm(`该用工需求将删除，学生端就无法看到该用工需求？`)
                .then(function () {
                    return delDeptpost(ids.join(","));
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        // 用工结束
        handleEnd(row) {
            this.$modal
                .confirm(`用工结束后，该用工需求将停止，人员也将释放`)
                .then(function () {
                    return deptpostEoe(row.wdpId);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("用工结束成功");
                })
                .catch(() => { });
        },
        deleteEmpty(data) {
            data.forEach(element => {
                if (element.childList) {
                    if (element.childList.length > 0) {
                        this.deleteEmpty(element.childList)
                    } else {
                        delete element.childList
                    }
                }
            });
        },
        getList() {
            deptpostList(this.queryParams).then((res) => {
                this.tablelist = res.rows
                this.total = res.total
            })
        },
        onSearch(val) {
            // 查询条件和分页数据合并
            this.queryParams = Object.assign(this.queryParams, val);
            if (this.queryParams.deptId) {
                this.queryParams.deptId = this.queryParams.deptId[this.queryParams.deptId.length - 1];
            }

            this.queryParams.pageNum = 1;
            this.getList();
        },
        // 重置
        onReset(data) {
            this.queryParams.pageNum = 1;
            this.queryParams = Object.assign(this.queryParams, data);
            this.getList();
        },
    },
};
</script>
<style scoped lang="scss">
.head-container {
    overflow-x: scroll;
}
</style>